<template>
	<div v-if="show_confirm" class="bombbox" ref="Boxconfirm" @click="gosuccess">
		<div class="bombbox_content">
			<div class="fleximg">
				<img src="../../assets/img/reference/success.png">
			</div>
			<div class="alert_content">
				<span class="text_l">{{content_l}}</span>
				<span class="text_c">{{content_c}}</span>
				<span class="text_r">{{content_r}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	export default {
		data () {
            return {
            	show_confirm:false,
            }
        },
		props:['content_img','content_l','content_c','content_r'],
		methods:{
			show:function(){
				this.show_confirm=true;
			},
			hide:function(){
				this.show_confirm=false;
			},
			gosuccess:function(){
				this.$emit('sunccessClick');
				this.show_confirm=false;
			}
		},
		create(){
		},
		computed: {
			users () {
		      return '../../img/' + this.content_img;
		    }
		},
	}
</script>

<style scoped>
	.bombbox{
		position: fixed;
	    width: 100%;
	    height: 100%;
	    z-index: 999;
	    top: 0;
	    left: 0;
		background: rgba(0,0,0,0.60);
	}
	.bombbox_content{
		position: relative;
		width: 80%;
		height: 150px;
		margin: 220px auto 0;
		background: #FFFFFF;
		border-radius: 4px;
		font-size: 0;
	}
	.fleximg{
		height: 60px;
		width: 100%;
		padding: 32px 0 16px 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.fleximg img{
		max-height: 60px;
		max-width: 60px;
	}
	.alert_content{
		font-size: 0;
		text-align: center;
	}
	.text_l{
		font-size: 1.4rem;
		color: #808080;
	}
	.text_c{
		font-size: 1.4rem;
		color: #F89721;
	}
	.text_r{
		font-size: 1.4rem;
		color: #808080;
	}
	
</style>